<template>
  <div class="baoshui">
      <div class="top">
            <div class="p">保税进口</div>
             <div class="arrow" @click="tui()">
            </div>
            <div class="xiaoxi" > 
            </div>
      </div>
     
      <!-- <div class="zhanwei"></div> -->
      <div class="containter">
          <img src="home/bsck.jpg" alt="">
            <img src="home/ys.jpg" alt="">
            <img src="home/sj.jpg" alt="">
            <img src="home/top.jpg" alt="">
      </div>
     <ul class="items" v-if="this.$store.state.listdata1.arr1.length!=0">
         <li v-for="(v,i) in this.$store.state.listdata1.arr1" :key="i">
             <div class="item">
                 <div class="img">
                     <img :src="v.imgurl"/>
                 </div>
                 <div class="right">
                     <p>{{v.title}}</p>
                     <div class="zhanwei">
                         <span>{{v.old}}</span>
                    </div>
                     <span>{{v.new1}}</span>
                     <button @click="fun(v.id)">立即购买</button>
                 </div>

             </div>
         </li>
        
     </ul>
    <div v-else>请稍等</div>
     <div class="gougouhaowu" > 
         <img src="home/haowu.jpg"/>
         <ul class="containt" v-if="this.$store.state.listdata1.arr2.length">
             <li v-for="(v,i) in this.$store.state.listdata1.arr2" :key="i">
                 <img :src="v.imgurl"/>
                 <p>{{v.title}}</p>
                 <div class="txt">
                     <span>{{v.fresh}}</span>
                     <span>{{v.old}}</span>
                 </div>
                 <button>立即购买</button>
             </li>
             
         </ul>
     </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            
        }
    },
    methods:{
        fun(id){
            this.$router.push({name:"Xiangqing",params:{id:id}})
        },
        tui(){
            this.$router.go(-1)
        }
    },
    mounted(){
        this.$store.dispatch("listdata")
        // console.log(this.$store.state.listdata1.arr)
    }
}
</script>

<style lang="scss">
    .baoshui{
        width: 100%;
       
        .top{
            width: 100%;
            height: .5rem;
        //    padding-top: .5rem;
            z-index: 100;
            position: fixed;
            top: 0px;
            background-color: #fff;
                .p{
                    text-align: center;
                    height: .5rem;
                     line-height: .5rem;
                    padding: 0 .65rem;
                }   
                .xiaoxi,.arrow{
                    width: .35rem;
                    height: .35rem;
                    position: absolute;
                    top: .07rem;
                    // background-color:orange ;
                   
                }
                 .arrow{
                    left: .05rem;
                   
                     background-size: 35px auto;
                    background-image:url(../../public/arrowz.png);
                     background-position:  0 0;
                }
                .xiaoxi{
                     right: .05rem;
                       background: url(../../public/arrowz.png) ;
                         background-position: 0 -.7rem;
                    background-size: 35px auto;
                }
               
        }
        .containter{
            margin-top: .5rem;
            width: 100%;
            img{
                display: block;
                width: 100%;
            }
        }
        .items{
            width: 100%;
            background: rgb(248, 228, 204);
            li{
                width: 100%;
                padding: .1rem;
               
                .item{
                    width: 100%;
                    height: 1.43rem;
                     background-color: #fff;
                    // background-color: firebrick;
                    padding: .1rem;
                    .img{
                        width: 1rem;
                        height: 1rem;
                        float: left;
                        img{
                            width: 1rem;
                            height: 1rem;
                        }
                    }
                    .right{
                        float: right;
                        width: 2.25rem;
                        height: 1.23rem;
                        position: relative;
                        p{
                            font-size: .12rem;
                            line-height: .12rem;
                        }
                        .zhanwei{
                            background: url(../../public/home/tips1.png) 0 0 no-repeat;
                            background-size: 100% .5rem;
                            width: 70%;
                            margin-top: .15rem;
                            height: .5rem; 
                            span{
                                right: .8rem;
                                font-size: .12rem;
                                color: #ccc;
                                text-decoration: line-through;
                            position: absolute;
                        }}
                        span:nth-child(3){
                                color: red;
                        }
                        button{
                            border-radius: .1rem;
                            padding:.04rem .12rem;
                            background-color: pink;
                            float: right;
                            border: none;
                            color: white;
                        }
                    }
                }
            }
        }
        .gougouhaowu{
            width: 100%;
            background-color: #f8e4cc;
            img{
                width: 100%;
            }
            .containt{
                width: 100%;
                display: flex;
                flex-wrap:wrap;
                // justify-content: space-between;
                margin:0 .1rem;
                li{
                    background-color: #fff;
                    // flex: 1;
                    box-sizing: border-box;
                    padding: .1rem;
                    width: 30.5%;
                    margin-right: .05rem;
                    margin-bottom: .1rem;
                    // height: 2.rem;
                    // margin-right: .1rem;
                    img{
                        width: 1.0498rem;
                        height: 1.0498rem;
                        margin-bottom: .05rem;
                    }
                    p{
                        font-size: .12rem;
                        color: #333;
                        margin-bottom: .1rem;
                    }
                    .txt{
                        width: 100%;
                        height: .3rem;
                        font-size: .12rem;
                         color: red;
                        // margin-bottom: .2rem;

                        span:nth-child(2){
                            text-decoration: line-through;
                            color: #ccc;
                        }
                    }
                    
                    button{
                        width: 100%;
                        background-color: red;
                        color: white;
                        height: .25rem;
                        line-height: .25rem;
                        text-align: center;
                        border: none;
                        border-radius: .1rem;
                        font-size: .12rem;
                    }
                }
            }

        }

    }
</style>